<template>
  <div class="main">
    <div class="main-lf">
      <ul>
        <li>
          <router-link tag="span" to="/home/overview">系统预览</router-link>
        </li>
        <li>
          <router-link tag="span" to="/home/register">设备登记</router-link>
        </li>
        <li>
          <router-link tag="span" to="/home/manager">设备管理</router-link>
        </li>
        <li>
          <router-link tag="span" to="/home/dictionary">数据字典</router-link>
        </li>
      </ul>
      <div class="version">
        <i class="iconfont">&#xe61d;</i>
        Version1.0
      </div>
    </div>

    <div class="main-rg">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>


export default {
  name: "HomeMain",
  
}
</script>

<style lang="less">
.main {
  display: flex;
  min-height: 650px;
  position: relative;

  .main-lf {
    width: 190px;
    padding: 16px 10px;
    position: relative;
    box-sizing: border-box;
    background-color: #2c405a;

    li {
      color: #fff;
      height: 40px;
      line-height: 40px;
      font-size: 14px;

      span {
        display: block;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding-left: 20px;
        border-radius: 6px;
        cursor: pointer;
      }
    }

    .router-link-active {
      background-color: #3f536e;
    }
  }
  .main-rg {
    width: calc(100% - 190px);
  }
  .version {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 53px;
    color: #fff;
    line-height: 53px;
    text-align: center;
    background-color: #3f5169;
    border-top: 1px solid #5b6a7f;
  }
}
</style>